<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <div id="app">
           <!--插值表达式 mastache-->
           {{msg}}----{{author}}
            <!--底层：构建dom节点，变量false，display:none-->
            <h1 v-show="flag">
                   <!--v-on:click 绑定事件-->
                <button v-on:click="addFun()">新增</button>

                商品列表
            </h1>
            <h1 v-show="!flag">
                新增商品
                <!--v-on:click 缩写  @事件-->
                <button  @click="showLIst()">返回 </button>
            </h1>



       </div>
   <!--    {{msg}}-->
       <script src="js/vue.js"></script>
       <script type="text/javascript">
           //1,创建vue对象
           const app = new Vue({
               el:"#app",// 绑定的dom的id   代表vue实例中的数据只在该dom中有效
               data:{//定义一些数据   项目中：异步请求服务端，服务端获取
                   msg:"hello,world!",
                   author:'Ellie',
                   flag:true,
                   isFlag:false
               },
               methods:{
                   addFun(){
                       this.flag = false;
                   },
                   showLIst(){
                       this.flag = true;
                   }
               }
           });
       </script>

</body>
</html>